<template>
    <div>
        <Row :gutter="20">
            <i-col
                :xs="12"
                :md="8"
                :lg="4"
                v-for="(infor, i) in inforCardData"
                :key="`infor-${i}`"
                style="height: 120px;padding-bottom: 10px;"
            >
                <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
                    <count-to :end="infor.count" count-class="count-style"/>
                    <p>{{ infor.title }}</p>
                </infor-card>
            </i-col>
        </Row>
        <Row :gutter="20" style="margin-top: 10px;">
            <i-col :md="24" :lg="8" style="margin-bottom: 20px;">
                <Card shadow>
                    <chart-pie style="height: 300px;" :value="pieData" text="用户访问来源"></chart-pie>
                </Card>
            </i-col>
            <i-col :md="24" :lg="16" style="margin-bottom: 20px;">
                <Card shadow>
                    <chart-bar style="height: 300px;" :value="barData" text="每周用户活跃量"/>
                </Card>
            </i-col>
        </Row>
        <Row>
            <Card shadow>
                <example style="height: 310px;"/>
            </Card>
        </Row>
    </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { ChartPie, ChartBar } from '_c/charts'
import Example from './example.vue'
export default {
    name: 'home',
    components: {
        InforCard,
        CountTo,
        ChartPie,
        ChartBar,
        Example
    },
    data() {
        return {
            inforCardData: [
                { title: '新增用户', icon: 'md-person-add', count: 803, color: '#2d8cf0' },
                { title: '累计点击', icon: 'md-locate', count: 232, color: '#19be6b' },
                { title: '新增问答', icon: 'md-help-circle', count: 142, color: '#ff9900' },
                { title: '分享统计', icon: 'md-share', count: 657, color: '#ed3f14' },
                { title: '新增互动', icon: 'md-chatbubbles', count: 12, color: '#E46CBB' },
                { title: '新增页面', icon: 'md-map', count: 14, color: '#9A66E4' }
            ],
            pieData: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 234, name: '联盟广告' },
                { value: 135, name: '视频广告' },
                { value: 1548, name: '搜索引擎' }
            ],
            barData: {
                Mon: 13253,
                Tue: 34235,
                Wed: 26321,
                Thu: 12340,
                Fri: 24643,
                Sat: 1322,
                Sun: 1324
            }
        }
    },
    mounted() {
        //
    }
}
</script>

<style lang="less">
.count-style {
    font-size: 50px;
}
</style>
